<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cesium Map</title>
    <style>
        .demo {
            width: 100%;
            height: 100%;
        }
        #cesiumMap {
            position: relative;
            width: 100%;
            height: 100%;
        }
    </style>
    <!-- 1.59 -->
    <link rel="stylesheet" type="text/css" href="../../lib/cesium/1.59/Widgets/widgets.css" >
    <script type="text/javascript" src="../../lib/cesium/1.59/Cesium.js"></script>
</head>
<body>
<div class="demo">
    <div id="cesiumMap"></div>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        var base_url = 'http://10.140.90.136:8081/gw/geowebcache/service/wmts?service=WMTS&request=GetTile' +
            '&version=1.0.0' +
            '&layer=影像底图_L7_18级202210_最终版&styles=&tilematrixSet=EPSG:4490_影像底图_L7_18级202210_最终版' +
            '&format=image/png&height=256&width=256&style=' +
            '&tilematrix=EPSG:4490_影像底图_L7_18级202210_最终版:{TileMatrix}&tilerow={TileRow}&tilecol={TileCol}'

        base_url = base_url.replace('{TileMatrix}', '{z}')
        base_url = base_url.replace('{TileRow}', '{y}')
        base_url = base_url.replace('{TileCol}', '{x}')

        const base_img = {
            name: '福建影像',
            url: base_url,
            layer: '',
            style: 'default',
            format: 'image/png',
            tileMatrixSetID: 'EPSG:4326',
            maximumLevel: '20',
            credit: 'U.S.Geological Survey',
            xmin: '116.37597962',
            ymin: '25.4812601242666',
            xmax: '118.666373693',
            ymax: '27.1320468236471',
            zjKey: 'fj_yx_img_c',
            maxScaleLevel: '2',
            minScaleLevel: '16',
            mapNo: '闽S[2023]132号'
        };

        var anno_url = 'http://10.140.90.136:8081/gw/geowebcache/service/wmts?service=WMTS&request=GetTile' +
            '&version=1.0.0&layer=影像注记_L7_18级202210_最终版&styles=' +
            '&tilematrixSet=EPSG:4490_影像注记_L7_18级202210_最终版' +
            '&format=image/png&height=256&width=256&style=' +
            '&tilematrix=EPSG:4490_影像注记_L7_18级202210_最终版:{TileMatrix}' +
            '&tilerow={TileRow}&tilecol={TileCol}'

        anno_url = anno_url.replace('{TileMatrix}', '{z}')
        anno_url = anno_url.replace('{TileRow}', '{y}')
        anno_url = anno_url.replace('{TileCol}', '{x}')

        const anno_img = {
            name: '福建影像注记',
            url: anno_url,
            layer: '',
            style: 'default',
            format: 'image/png',
            tileMatrixSetID: 'EPSG:4326',
            maximumLevel: '20',
            credit: 'U.S.Geological Survey',
            xmin: '116.37597962',
            ymin: '25.4812601242666',
            xmax: '118.666373693',
            ymax: '27.1320468236471'
        };

        let viewer; // 将 viewer 声明为全局变量

        function init() {
            // 禁用默认的访问令牌
            Cesium.Ion.defaultAccessToken = '';

            viewer = new Cesium.Viewer('cesiumMap', {
                imageryProvider: false, // 不使用默认影像图层
                baseLayerPicker: false  // 不使用默认图层选择器
            });
            const widget = viewer.cesiumWidget;

            try {
                var wgs84 = new Cesium.GeographicTilingScheme();

                viewer.imageryLayers.addImageryProvider(
                    new Cesium.WebMapTileServiceImageryProvider({
                        tilingScheme: wgs84,
                        url: base_img.url,
                        layer: base_img.layer,
                        style: base_img.style,
                        format: base_img.format,
                        tileMatrixSetID: base_img.tileMatrixSetID,
                        maximumLevel: base_img.maximumLevel,
                        credit: base_img.credit
                    })
                );

                viewer.imageryLayers.addImageryProvider(
                    new Cesium.WebMapTileServiceImageryProvider({
                        tilingScheme: wgs84,
                        url: anno_img.url,
                        layer: anno_img.layer,
                        style: anno_img.style,
                        format: anno_img.format,
                        tileMatrixSetID: anno_img.tileMatrixSetID,
                        maximumLevel: anno_img.maximumLevel,
                        credit: anno_img.credit
                    })
                );

                // 定位
                const mapCenter = [26.08, 119.28]; // 福州
                setView({ lng: mapCenter[1], lat: mapCenter[0] });
            } catch (e) {
                if (widget._showRenderLoopErrors) {
                    var title = '渲染时发生错误，已停止渲染。';
                    widget.showErrorPanel(title, undefined, e);
                }
            }
        }

        function setView(lngLat) {
            viewer.scene.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(lngLat.lng, lngLat.lat, 4790)
            });
        }

        init();
    });
</script>
</body>
</html>
